<template>
  <div class="content">
    <JobCareersTop></JobCareersTop>

    <div class="block choose-category-block">
      <div style="display: flex;position: relative" @mouseleave="changeMouseover">
        <div class="first-category-block" :style="{height:isShowMore?'auto':'630px'}">
          <div class="first-category-title">热门职位</div>
          <div v-show="!isShowMore" style="height: 40px;display: flex;align-items: center;justify-content: center;color: #ff7626;position: absolute;bottom: 0;width: 100%;background: #fff;z-index: 999" class="show-more" @mouseenter="isShowMore=true;">显示更多职位</div>
          <div v-for="(item,index) in category" @mouseenter="changeCategoryActive(item,index)"  :key="item.id" :class="categoryActive===item.id?'active':''" class="first-category-item">{{item.jobTitle}}</div>
        </div>
        <div v-show="categoryActive != null" :style="{top:positionTop+'px'}" class="second-category-block" id="second-category-block" >
          <span class="onx" @click="changeMouseover">x</span>
          <div v-for="(item,index) in categoryChild" :key="item.id" class="second-category-item">
            <div class="title">
              <router-link :to="{path:identity==1?'/position/position-filtrate':'/personal/personal-filtrate',query:{jobType:item.id,jobLevel: 2}}">{{item.jobTitle}}</router-link>
            </div>
            <div class="category-content">
              <router-link :to="{path:identity==1?'/position/position-filtrate':'/personal/personal-filtrate',query:{jobType:item1.id,jobLevel: 3}}" v-for="(item1,index1) in item.subLevelModelList" :key="item1.id" class="category-item">{{item1.jobTitle}}</router-link>
            </div>
          </div>
        </div>
      </div>


      <div class="first-img" style="margin-left: 273px">
        <img src="@/assets/images/advertisement1.png" class="first-category-img1" alt="">
        <img src="@/assets/images/advertisement2.png" class="img2" alt="">
      </div>
      <div class="first-img2">
        <router-link :to="{path:'/job-fair/index',query:{id:10}}">
          <img src="@/assets/images/jobFairs1.png" alt="" >
        </router-link>
        <router-link :to="{path:'/job-fair/index',query:{id:13}}">
          <img src="@/assets/images/jobFairs2.png" class="first-img2-img" alt="">
        </router-link>
        <router-link :to="{path:'/job-fair/index',query:{id:12}}">
          <img src="@/assets/images/jobFairs3.png" class="first-img2-img" alt="">
        </router-link>
      </div>
    </div>
    <div class="block position-block">
      <div class="block-title">
        <div class="line"></div>
        <div class="title" v-if="identity==='1'">岗位推荐</div>
        <div class="title" v-if="identity==='2'">人才推荐</div>
      </div>
    </div>

    <div v-if="!user||identity==='1'" class="block position-block" >
      <div class="block position-block" v-loading="positionLoading">
        <PositionItem class="position-item" :key="item.id" :data="item"
                      v-for="(item) in positionList.slice(0, 8)" ></PositionItem>
        <router-link :to="{name:'positionFiltrate'}" class="position-item more">
          <div>更多职位</div>
          <div class="more">点击查看></div>
        </router-link>
      </div>
    </div>
    <div v-if="identity==='2'" class="block position-block">
      <div class="block position-block" v-loading="personalLoading">
        <CustomerList class="position-item" :key="item.id" :data="item"
                      v-for="(item) in personalList.slice(0, 8)"></CustomerList>
        <router-link :to="{name:'personalFiltrate'}" class="position-item more1">
          <div>更多求职者</div>
          <div class="more">点击查看></div>
        </router-link>
      </div>
    </div>
    <CoverLoading v-if="coverLoading" type="0"></CoverLoading>
    <div class="block create-resume-block" v-if="identity==='1'">
      <div @click="reviewResume"><img alt="" src="@/assets/images/create-resume.jpg"></div>
    </div>
  </div>
</template>

<script>
import JobCareersTop from "@/components/JobCareersTop/JobCareersTop";
import PositionItem from "@/components/PositionItem/PositionItem";
import CustomerList from "@/components/PositionItem/CustomerList";
import CoverLoading from '@/components/CoverLoading/CoverLoading';
import {getCustomerListApi} from "@/api/personal";

import Cookies from "js-cookie";
import {getPublish,findJobNameApi} from "@/api/position";
import {getResumePdf} from "@/api/mineCenter";
import {mapGetters} from "vuex";

export default {
  name: "jobCareers",
  components: {PositionItem, JobCareersTop,CustomerList,CoverLoading},
  data() {
    return {
      hot: ['客户经理', '销售', '产品运营', 'Java工程师',],
      searchKeyWord: '',

      positionLoading:false,
      positionList: [],

      personalLoading:false,
      personalList: [],

      category: [],
      categoryActive:null,
      categoryChild:[],
      selectedObjActive:null,
      positionTop:45,
      isShowMore:false,
      coverLoading:false,
    }
  },
  computed:{
    identity(){

      return this.$store.getters.identity
    },
    ...mapGetters(['user'])
  },

  methods:{
    changeCategoryActive(menu,index){
      this.categoryActive=menu.id
      this.categoryChild=menu.subLevelModelList
      this.$nextTick(()=>{
        const whiteHeight=document.getElementById('second-category-block').offsetHeight;
        const mainHeight=(index+1)*35+45;
        this.positionTop=(whiteHeight/2)>mainHeight?0:mainHeight-whiteHeight/2
      })
    },
    changeMouseover(){
      this.isShowMore=false;
      this.categoryActive=null
      this.categoryChild=[]
    },
    //岗位列表
    getPosition(){
      this.positionLoading=true
      getPublish({page:1,limit:8}).then((res)=>{
        this.positionList=res.list
      }).finally(()=>{
        this.positionLoading=false
      })
    },

    //人员列表
    getPersonal(){
      this.personalLoading=true
      getCustomerListApi({page:1,limit:8}).then((res)=>{
        this.personalList=res.list
      }).finally(()=>{
        this.personalLoading=false
      })
    },
    //三级职业
    findJobName() {
      findJobNameApi({postType:1}).then((res) => {
        this.category=res
      })
    },
    //预览简历
    reviewResume() {
      this.coverLoading=true
      getResumePdf({}).then((res)=>{
        setTimeout(()=>{
          this.coverLoading=false
          window.open(res)
        },2000)
      }).catch(()=>{
        this.coverLoading=false
      })
    },
  },
  mounted() {
    const type = Cookies.get('identity');
    if(!this.user||type ==='1')
    {
      this.getPosition()
    }
    if(type ==='2')
    {
      this.getPersonal()
    }
    this.findJobName()
  }
}
</script>

<style lang="scss" scoped>
#mask{
  width: 100%;
  opacity: 0.6;
  background-color: #FFFFFF;
  bottom: 0;
  left: 0;
  position: fixed;
  z-index: 999;
}
.mask_img{
  width: 316px;
  height: 200px;
  z-index: 999;
  position: fixed;
  right: 50px;
}

.block {
  width: $contentWidth;
  margin: 0 auto;
  margin-top: 16px;
}
.block.position-block {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .block-title {
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 30px;
    background: #fff;
    border-radius: 5px;

    .line {
      height: 23px;
      width: 10px;
      background: $red;
      border-radius: 20px;
      margin-right: 10px;
    }

    .title {
      font-weight: bold;
      font-size: 20px;
      color: $orange;
    }
  }

  .position-item {
    width: calc((100% - 30px) / 3);
    margin-right: 15px;
    margin-bottom: 15px;

  }

  .position-item:nth-child(3n) {
    margin-right: 0;
  }

  .position-item.more {
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    height: 270px;
    .more {
      margin-top: 8px;
      font-size: 14px;
      color: $orange;
      cursor: pointer;
    }
  }
  .position-item.more1 {
    align-items: center;
    justify-content: center;
    font-size: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 5px;
    .more {
      margin-top: 8px;
      font-size: 14px;
      color: $orange;
      cursor: pointer;
    }
  }
}
.block.create-resume-block{
  margin-top: 0;
  height: 165px;
  cursor: pointer;
  margin-bottom: 20px;
  img{
    width: 100%;
    height: 100%;
  }
}
.block.job-fair-block{
  height: 120px;
  display: flex;
  flex-direction: row;
  img{
    width: calc((100% - 40px)/3);
    height: 100%;
    margin-right: 20px;
    border-radius: 5px;
    cursor: pointer;
  }
  img:last-child{
    margin-right: 0;
  }
}
.block.choose-category-block{
  padding-bottom: 20px;
  border-radius: 5px;
  margin-bottom:20px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  .first-img{
    margin-left: 8px;
    width: 35%;
    .img2{
      padding-top: 6px;
    }
  }
  .first-img2{
    padding-left: 188px;
    width: 10%;

    .first-img2-img{
      padding-top: 8px;
    }

  }
  .title-block{
    width: 100%;
    font-size: 18px;
    padding:20px 30px;
  }
  .first-category-block{
    width: 265px;
    height: 630px;
    overflow-y: hidden;
    background-color: #FF7626;
    color: #FFFFFF;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    .first-category-title{
      font-size: 20px;
      width: 100%;
      padding:0 30px;
      height: 45px;
      display: flex;
      align-items: center;
      cursor: pointer;
      color: #FFFFFF;
    }
    .first-category-item{
      width: 100%;
      padding:0 30px;
      height: 35px;
      display: flex;
      align-items: center;
      font-size: 15px;
      cursor: pointer;
      color: #FFFFFF;
    }
    .first-category-item.active{
      background: #FFFFFF;
      color: #2B2B2B;
    }
  }

  .second-category-block{
    height: auto;
    width: 765px;
    padding:0 30px;
    background-color: #FFFFFF;
    position:absolute;
    left:265px;
    box-shadow: 0px 0px 10px 0PX #e4e4e4;
    z-index: 999999999;
    .onx{
      float: right;
      margin-top: 10px;
      cursor: pointer;
    }
    .second-category-item{
      padding-top: 10px;
      width: 100%;
      .title{
        margin-bottom: 20px;
      }
      .category-content{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        .category-item{
          margin-right: 20px;
          color: $darkGray;
          font-size: 14px;
          margin-bottom: 10px;
          cursor: pointer;
        }
        .category-item.active{
          color: $orange;
        }
      }
    }
  }
}
</style>
